﻿//图片自动适应
$(window).bind("load", function () {
    autoResizeImage("mapContainer");
});
window.onresize = function () {
    autoResizeImage("mapContainer");
}
var timeOut;

//生成播放列表的数据
function getPlayList(jsonData) {
    clearTimeout(timeOut);
    $("#playBtn").removeClass("btn-pause");
    $("#playBtn").addClass("btn-play");


    var modelA = $("#modelli").find("input[name='Model']:checked");
    var stationA = $("#stationli").find("input[name='Station']:checked");
    var fileTypeA = $("#filetypeli").find("input[name='FileType']:checked");
    var modelType = "";    //模式类型
    var productName = "";      //产品名称
    var station = "";      //站点信息
    var fileType = "";      //文件类型
    var ulHtml = "";         //播放列表Html内容
    var mapContainer = $("#mapContainer");     //显示图片的容器
    var mapContainerHtml = "<img id='img' src='../Content/themes/default/images/wutupian.jpg' title='单击图片可以在新窗口浏览图片' border='0' />";

    if (modelA.length > 0) {
        modelType = modelA.val();
    }
    if (stationA.length > 0) {
        station = stationA.val();
    }
    if (fileTypeA.length > 0) {
        fileType = fileTypeA.val();
    }

    if (station === "") {
        productName = fileType;
    }
    else {
        productName = fileType + "-" + station;
    }

    //生成播放列表html内容
    var index = 0;
    for (var i = 0; i < jsonData.length; i++) {
        if (jsonData[i].ModeType === modelType && jsonData[i].ProductName === productName) {
            var hovClass = "";
            if (index == 0) {
                hovClass = "hov";
                mapContainerHtml = "<img id='img' src='" + jsonData[i].FilePath + "/" + jsonData[i].FileName + "' onclick='openNew(false);' border='0' />";
            }
            var temp = (GetTimeFromJsonString(jsonData[i].TimePoint) - GetTimeFromJsonString(jsonData[i].BeginTime)) / 3600000;
            temp = jsonData[i].EffectiveTime - temp + "";
            temp = "000".substring(0, 3 - temp.length) + temp;
            ulHtml += "<li><a class='" + hovClass + "' href='javascript:void(0)'>" + temp + "时" + "<input type='hidden' name='ImageSrc' value='" + jsonData[i].FilePath + "/" + jsonData[i].FileName + "'>" + "</a></li>";
            index++;
        }
    }

    if (ulHtml === "") {
        ulHtml = "<li><a href='javascript:void(0)'>暂无图片</a></li>";
    }

    $("ul.ul-4").html("");     //先清空原先的内容
    $("ul.ul-4").html(ulHtml);

    mapContainer.html("");
    mapContainer.html(mapContainerHtml);
    $("#mapContainer img").load(function () {
        autoResizeImage("mapContainer");
    })
}

//上下一张图片
function nextImage(unit) {
    var aList = $(".ul-4 a");   //a标签集合
    var aCount = aList.length;
    if (aCount > 1) {
        var selectA = $(".ul-4 a.hov");   //当前选中的a标签
        var imgSrc = "";
        var index = aList.index(selectA);   //当前选中的p标签在集合的索引
        selectA.removeClass("hov");
        index += unit;
        if (index >= aCount) {
            index -= aCount;
        }
        if (index < 0) {
            index += aCount;
        }
        aList.eq(index).addClass("hov");
        imgSrc = aList.eq(index).find("input").val();
        $("#img").attr("src", imgSrc);
    }
}


//页面加载完成后的事件
function Start(jsonData) {
    //设置播放列表距离搜索框的距离
    var refferOffsetTop = $("#reffer").offset().top + 1;
    $("ul.ul-4").css("top", refferOffsetTop + "px");

    getPlayList(jsonData);
    //条件选择点击事件
    $("#modelli,#stationli,#filetypeli").find("input:radio").click(function () {
        getPlayList(jsonData);
    });

    //播放列表点击事件
    $(".ul-4").delegate("a", "click", function () {
        loadingShow();
        stop();
        var imageSrc;
        imageSrc = $(this).find("input").eq(0).val();
        $(".ul-4 a").removeClass("hov");
        $(this).addClass("hov");
        $("#img").attr("src", imageSrc);
        loadingHide();
    });

    //前一张
    $("#preBtn").click(function () {
        loadingShow();
        stop();
        nextImage(-1);
        loadingHide();
    });

    //下一张
    $("#nextBtn").click(function () {
        loadingShow();
        stop();
        nextImage(1);
        loadingHide();
    });

    //播放图片

    $("#playBtn").click(function () {
        if ($(this).hasClass('btn-play')) {
            $("#mapContainer img").bind("load", function () { timeOut = setTimeout(function () { nextImage(1); }, 1000); });
            nextImage(1);
            $(this).removeClass("btn-play");
            $(this).addClass("btn-pause");
        }
        else {
            $("#mapContainer img").unbind("load");
            clearTimeout(timeOut);
            $(this).removeClass("btn-pause");
            $(this).addClass("btn-play");
        }
    });

    function stop() {
        $("#mapContainer img").unbind("load");
        clearTimeout(timeOut);
        $("#playBtn").removeClass("btn-pause");
        $("#playBtn").addClass("btn-play");
    }
}